<template>
  <div class="menu">
    <div class="slot-items">
      <slot name="default"></slot>
    </div>
    <div class="default-items">
      <div class="icon">
        <IconStar></IconStar>
      </div>
      <div class="icon" @click="setModalVisible(true)">
        <IconMessage></IconMessage>
      </div>
      <div class="avatar" @click="setDrawerVisible(true)">
        <a-avatar>A</a-avatar>
      </div>
    </div>

    <drawer :visible="drawerVisible" :setVisible="setDrawerVisible">
      <div class="profile">
        <div class="profile-header">
          <a-upload
            @before-upload="customRequest"
            :show-file-list="false"
            v-model="filePic"
            :limit="1"
          >
            <template #upload-button>
              <div :class="`arco-upload-list-item`">
                <div class="arco-upload-list-picture custom-upload-avatar">
                  <img :src="userInfo.picture" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                </div>
              </div>
            </template>
          </a-upload>

          <div class="profile-header-text">
            <div class="username">
              <span>
                {{ userInfo?.nickName ?? "--" }}
              </span>
              <span style="color: #888; font-size: 12px">
                #{{ userInfo?.id ?? "--" }}
              </span>
            </div>
            <div class="identity">
              {{ identityMap[userInfo?.role] }}
            </div>
          </div>
        </div>

        <div class="profile-body">
          <a-button @click="setFrinedModalVisible(true)">好友列表</a-button>
          <a-button @click="setNearModalVisible(true)">附近的人</a-button>
          <a-button @click="logout">注销</a-button>
        </div>
      </div>
    </drawer>

    <modal :visible="frinedModalVisible" :set-visible="setFrinedModalVisible">
      <friendsList></friendsList>
    </modal>

    <modal :visible="modalVisible" :setVisible="setModalVisible">
      <slot name="modal1"></slot>
    </modal>

    <modal :visible="nearModalVisible" :setVisible="setNearModalVisible">
      <div class="listNearPersonClass" v-for="item in nearPersonList">
        <a-card :style="{ width: '360px' }" :title="item.nickName">
          <template #extra>
            <a-link @click="addFrinds(item.id)">添加好友</a-link>
          </template>
          <div>电话：{{ item.phone }}</div>
        </a-card>
      </div>
    </modal>
  </div>
</template>

<script setup lang="ts">
import friendsList from "@/components/car/friends-list/index.vue";
import { IconStar, IconMessage } from "@arco-design/web-vue/es/icon";
import drawer from "@/components/common/drawer/index.vue";
import modal from "@/components/common/modal/index.vue";
import { ref } from "vue";
import router from "@/router/route";
import { Message } from "@arco-design/web-vue";
import { onMounted } from "vue";
import {
  nearPerson,
  addPerson,
  postHeadImg,
  getUserInfo,
} from "@/apis/oldman/index";
import { oldmanUploadRequest } from "@/apis/oldman/base";

const identityMap = ["普通用户", "专家", "护工", "养老院院长"];

const filePic = ref();

const customRequest = async (data) => {
  const formData = new FormData();
  formData.append("file", data);
  const res = await oldmanUploadRequest("load", formData);
  await loadUserInfo();
  setDrawerVisible(false);
  return true;
};
const drawerVisible = ref(false);
const modalVisible = ref(false);
const nearModalVisible = ref(false);
const userInfo = ref(null);

const logout = () => {
  localStorage.removeItem("jwtToken");
  localStorage.removeItem("userInfo");
  userInfo.value = null;
  router.push("/");
  Message.info("注销成功");
};

const frinedModalVisible = ref(false);

const setFrinedModalVisible = (v: boolean) => {
  frinedModalVisible.value = v;
};
const setDrawerVisible = (v: boolean) => {
  drawerVisible.value = v;
};

const setModalVisible = (v: boolean) => {
  modalVisible.value = v;
};
const setNearModalVisible = (v: boolean) => {
  nearModalVisible.value = v;
};

// 附近的人
const nearPersonList = ref();
const getNearPerson = async () => {
  nearPerson().then((res) => {
    nearPersonList.value = res.data.data;
    console.log(nearPersonList.value, "nearPersonList.value");
  });
};
const addFrinds = (id) => {
  addPerson({ id: id }).then((res) => {
    if (res.data.code === 500) {
      Message.success("已经是好友了");
      return;
    }
    Message.success("添加好友成功");
  });
};

// 上传头像
// const uploadImg = () => {
//   let file = new FormData();
//   postHeadImg();
// };

const loadUserInfo = async () => {
  const res = await getUserInfo();
  userInfo.value = res.data.data;
  console.log("更新了", userInfo.value);
};

onMounted(() => {
  getNearPerson();
  loadUserInfo();
  const info = localStorage.getItem("userInfo");
  if (info) {
    userInfo.value = JSON.parse(info);
  }
});
</script>

<style scoped>
.menu {
  height: 52px;
  padding: 0 12px;
  gap: 24px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  background-color: var(--color-neutral-2);
}

.default-items {
  display: flex;
  justify-content: space-around;
  gap: 24px;
  align-items: center;
}

.slot-items {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  gap: 12px;
}

.icon {
  text-align: center;
  color: #3337;
  cursor: pointer;
}

.icon * {
  height: 24px;
  width: 24px;
}

.avatar {
  cursor: pointer;
}

.profile-header {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
}

.username {
  font-weight: 700;
  display: flex;
  align-items: baseline;
}

.email {
  font-weight: 400;
}

.profile-body {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
}

.friend-list {
  min-height: 300px;
  max-height: 80vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
}

.friend-item {
  background-color: pink;
}

.listNearPersonClass {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-header-text {
}
</style>
